<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>name: {{ person.name }}</h2>
    <h2>age: {{ person.age }}</h2>
    <button @click="changeName">changeName</button>
    <button @click="changeAge">changeAge</button>
    <button @click="changePerson">changePerson</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { watch, ref } from "vue";
// 1. data
let person = ref({
  name: "Jack",
  age: 18,
});
// 2. function
function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "Tom", age: 21 };
}
// 3. watch
// 情况二：监视【ref】定义的【对象类型】数据名，监视的是对象的地址值，若想监视对象内部的属性的变化，需要手动开启 deep 监视
//    watch 的第一个参数：被监视的数据
//    watch 的第二个参数：监视的回调
//    watch 的第三个参数： 配置对象（deep | immediate）
watch(person, (newVal, oldWal) => {
  console.log("person change", newVal, oldWal);
}, {deep: true});
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
